<script setup lang="ts">

import useMemberStore from "@/pinia/memberStore.ts";
import {computed, onMounted, reactive, ref} from "vue";
import {storeToRefs} from "pinia";
import Person from "@/views/hospital/views/client/components/person.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deletePatAPI, fetchDictListAPI, addOrEditPatAPI} from "@/api/memberApi.ts";

const memberStore = useMemberStore()

const {personList, certificatesType} = storeToRefs(memberStore)
const loading = ref(false)
const showDrawer = ref(false)
const isEdit = ref(false)

let formData = reactive({
  params: {
    address: "",
    birthdate: "",
    cardNo: "",
    certificatesNo: "",
    certificatesType: "",
    cityCode: "",
    contactsCertificatesNo: "",
    contactsCertificatesType: "",
    contactsName: "",
    contactsPhone: "",
    createTime: "",
    districtCode: "",
    isDeleted: 0,
    isInsure: 0,
    isMarry: 0,
    name: "",
    param: {},
    phone: "",
    provinceCode: "",
    sex: 0,
    status: "",
    updateTime: "",
    userId: 0,
    addressSelected: []
  }
})
const props = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const {data: list} = await fetchDictListAPI(node.data.id || 86)
    const showData = list.map(item => ({value: item.value, label: item.name, leaf: !item.hasChildren, id: item.id}))
    resolve(showData)
  },
}
const filterPersonList = computed(() => personList.value.filter(item => item.id !== undefined))


const handleAdd = () => {
  isEdit.value = false
  showDrawer.value = true
}
const handleEdit = (row) => {
  isEdit.value = true
  showDrawer.value = true
  formData.params = {...row}
}

const handleDelete = async (id) => {
  const confirm = await ElMessageBox.confirm("确定删除就诊人吗?", "警告").catch(error => error)
  if (confirm === "cancel") return
  try {
    await deletePatAPI(id)
    await fetchPersonList()
    ElMessage.success("删除成功")
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const fetchPersonList = async () => {
  loading.value = true
  try {
    await memberStore.fetchPersonList()
  } catch (error) {
    ElMessage.error(error.message)
  } finally {

    loading.value = false
  }
}
const title = computed(() => isEdit.value ? "编辑就诊人" : "添加就诊人")


const handleSubmit = async () => {
  try {
    const {message} = await addOrEditPatAPI(formData.params)
    await fetchPersonList()
    ElMessage.success(message)
    showDrawer.value = false
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const handleClose = () => {
  formData.params = {
    address: "",
    birthdate: "",
    cardNo: "",
    certificatesNo: "",
    certificatesType: "",
    cityCode: "",
    contactsCertificatesNo: "",
    contactsCertificatesType: "",
    contactsName: "",
    contactsPhone: "",
    createTime: "",
    districtCode: "",
    isDeleted: 0,
    isInsure: 0,
    isMarry: 0,
    name: "",
    param: {},
    phone: "",
    provinceCode: "",
    sex: 0,
    status: "",
    updateTime: "",
    userId: 0,
    addressSelected: []
  }
}
onMounted(() => {
  fetchPersonList()
  memberStore.findByDictCode("CertificatesType")
})


</script>

<template>
  <div class="patient" v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgb(255, 255, 255)">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-link type="primary">就诊人管理</el-link>
          <el-button type="primary" icon="User" @click="handleAdd">添加就诊人</el-button>
        </div>
      </template>
      <div class="card-body">
        <Person v-for="(person,index) in filterPersonList" :key="person.id" :user="person">
          <template #default="{row}">
            <el-button type="primary" size="small" icon="Edit" circle @click="handleEdit(row)"></el-button>
            <el-button type="danger" size="small" icon="Delete" circle @click="handleDelete(row.id)"></el-button>
          </template>
        </Person>
      </div>
    </el-card>

    <el-drawer v-model="showDrawer" :title="title" :close-on-click-modal="false" @close="handleClose">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form label-width="80px" :model="formData.params">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="formData.params.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="formData.params.certificatesType" placeholder="请选择证件类型">
            <el-option v-for="(item,index) in certificatesType" :value="item.value" :label="item.name" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="formData.params.certificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="formData.params.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker value-format="YYYY-MM-DD" placeholder="请选择出生日期" v-model="formData.params.birthdate"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="formData.params.phone"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">建档信息</el-divider>
      <el-form label-width="80px">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="formData.params.isMarry">
            <el-radio :label="1">未婚</el-radio>
            <el-radio :label="0">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="formData.params.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前地址">
          <el-cascader :props="props" v-model="formData.params.addressSelected"/>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入详细地址" v-model="formData.params.address"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息</el-divider>
      <el-form label-width="80px">
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="formData.params.contactsName"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="formData.params.contactsCertificatesType" placeholder="请选择证件类型">
            <el-option v-for="(item,index) in certificatesType" :value="item.value" :label="item.name" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="formData.params.contactsCertificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="formData.params.contactsPhone"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <el-button @click="handleClose">重置</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.patient {
  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .card-body {
    display: flex;
    flex-wrap: wrap;
  }

  .el-drawer__body {
    .el-form {
      width: 70%;

      .el-select {
        width: 100%;
      }
    }

    .btn-box {
      text-align: center;
    }
  }
}
</style>
